<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/api/favicon">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <title>大学生心理健康评估：后台管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            width: 100vw;
            height: 100vh;
            background-image: url({% static 'images/login_bg.jpg' %});
            background-size: cover;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login_box {
            width: 460px;
            padding: 40px 40px 60px 40px;
            background-color: #ffffff;
            border-radius: 6px;
            box-shadow: 0 0 10px #333;
        }

        .title {
            margin: 0 0 0 -58px;
            padding: 16px 10px 16px 60px;
            background: #27A9E3;
            position: relative;
            color: #fff;
            font-size: 20px;
        }

        #darkbannerwrap {
            background: url(https://assets-1259037473.cos.ap-chengdu.myqcloud.com/images/aiwrap.png);
            width: 18px;
            height: 10px;
            margin: 0 0 20px -58px;
            position: relative;
        }

        .el-form-item__content {
            display: flex;
        }

        .el-tab-pane {
            position: relative;
        }

        .el-tab-pane > .el-button {
            position: absolute;
            bottom: -5px;
            right: 15px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login_box">
        <div class="title">大学生心理健康评估：后台管理</div>
        <div id="darkbannerwrap"></div>
        <el-form label-width="70px" :model="login_form" style="margin-top: 40px">
            <el-form-item label="名称">
                <el-input v-model="login_form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="login_form.pwd" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button plain @click="login">立即登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            login_form: {
                name: "",
                pwd: ""
            }
        },
        mounted: function () {

        },
        methods: {
            login() {
                if (this.login_form.pwd && this.login_form.name) {
                    let param = new FormData();
                    param.append('name', this.login_form.name);
                    param.append('pwd', this.login_form.pwd);
                    axios.post('', param).then(res => {
                        if (res.data.state) {
                            swal({
                                title: '登陆成功',
                                icon: "success",
                                timer: 800
                            }).then(() => {
                                Cookies.set('secret_key', res.data.secret_key);
                                window.location.href = '/cms/index'
                            })
                        } else {
                            swal('登陆失败', res.data.msg, "error")
                        }
                    })
                } else {
                    this.$message({
                        message: '请填写用户名和密码！',
                        type: 'warning'
                    });
                }
            },
        }
    });
</script>
</body>
</html>
